<!--<div class="state-wrap">
    <div class="row list-unstyled clearfix">
        <% for(i=1;i<=1;i++){ %>
        <div class="col-sm-31 item">
            <article class="map-item">
                <figure>
                    <div class="btn-action"><a href="" class="btn-edit"><i class="fa fa-pencil-square-o"></i> 编辑</a><a href="" class="btn-love"><i class="fa fa-heart"></i> 喜欢(456)</a></div>
                    <a href="../images/demo/case<%=i%>.jpg" data-lightbox="roadtrip" data-title="相册名称相册名称相册名称相册名称相册名称<%=i%>">
                        <img class="img-responsive" src="../images/demo/case<%=i%>.jpg" alt=""/>
                    </a>
                    <figcaption><a href="">相册名称相册名称相册名称相册名称相册名称<%=i%></a></figcaption>
                </figure>
                <time>2015-05-05</time>
            </article>
        </div>
        <% } %>
    </div>
</div>-->

<div class="state-wrap">
    <div id="waterfall" class="list-unstyled clearfix"></div>
</div>


<script src="/javascripts/vendors/lightbox.min.js"></script>
<script type="text/javascript" src="/javascripts/vendors/jquery.waterfall.js"></script>

<script type="text/javascript">
    $(function(){
        // 一次性全部加载到本地，再部分显示
         $('#waterfall').waterfall({
         	url: '/javascripts/vendors/json.js',
         	perNum: 5,			// 每次显示五个
         	ajaxTimes: 1 		// 只发送一次请求
         });


        // 按需加载方式
        var wf_page = 0;
        $('#waterfall').waterfall({
            // 自定义跨域请求
//            ajaxFunc: function(success, error){
//                $.ajax({
//                    type: 'GET',
//                    url: 'http://www.wookmark.com/api/json/popular?callback=?',
//                    cache: false,
//                    data: {'page': ++wf_page},
//                    dataType:'jsonp',
//                    timeout: 60000,
//                    success: success,
//                    error: error
//                });
//            },
            createHtml: function(data){
                return '<article class="map-item">' +
                            '<figure>'+
                                '<div class="btn-action">'+
                                    '<a href="javascript:void(0)" class="btn-edit js_alert_pho"><i class="fa fa-pencil-square-o"></i> 编辑</a>'+
                                    '<a href="" class="btn-love"><i class="fa fa-heart"></i> 喜欢(456)</a>'+
                                '</div>'+
                                '<a href="'+ data.preview +'" data-lightbox="roadtrip" data-title="'+ data.title +'">'+
                                    '<img class="thumb_img" src="'+ data.preview +'" alt="'+data.title+'"/>'+
                                '</a>'+
                                '<figcaption><a href="'+data.image+'">'+ data.title +'</a></figcaption>'+
                            '<figure>'+
                            '<time>2015-05-05</time>'+
                        '</article>';
            }
        });
    });
</script>